<template>
    <div class="wrap">
        <div class="head">
            <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="back" />
        </div>
        <div class="content">
            <ul>
                <li v-for="item in msgList" :key="item.ID" class="item"
                    :class="item.flow == 'out' ? 'right' : 'left'">
                    <div class="avart">
                        <van-icon
                            :name="item.avatar ? item.avatar : 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_16.png'"
                            size="30"></van-icon>
                    </div>
                    <div class="msg">
                        <div class="msgContent">{{ item.payload.text }}</div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="footer">
            <van-field v-model="message" :autosize="{ maxHeight:100, minHeight: 100 }" type="textarea" placeholder="请输入要发送的消息"  class="msgInput"/>
            <van-button type="success" @click="send" class="sentBtn">发送</van-button>
        </div>
    </div>
</template>
<script setup>
import { reactive,ref } from 'vue'
import TencentCloudChat from "@tencentcloud/chat";
import { useRoute, useRouter } from 'vue-router';
import { chat } from '../../utils/chat';
import { useUserStore } from '../../stores/useUserStore';
import {useChatStore} from "../../stores/useChatStore"


const userStore = useUserStore()
const chatStore = useChatStore()
const router = useRouter();
const route = useRoute();
const id = route.params.id;
const msgList = reactive([]);
const message = ref('')
const userID = userStore.userInfo.name

chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, (event) => {
    console.log(event, '别人发送消息过来了....');
    let message = event.data[0];
    console.log(message);
    msgList.push(message)
});
const getList = async () => {
    const res = await chat.getMessageList({
        conversationID: id
    });
    if (res.code == 0) {
        res.data.messageList.forEach(element => {
            msgList.push(element)
        });
        console.log(msgList)
    }
};
getList();
console.log(id);
const back = () => {
    router.back();
}
const send = async () => {
    if( !chatStore.ready){
        alert('系统初始化中....');
        return
    }
    // 封装消息
    let IMmessage = chat.createTextMessage({
        to: id.substring(3,id.length),
        conversationType: TencentCloudChat.TYPES.CONV_C2C,
        payload: {
            text: message.value,
        },
        needReadReceipt: true
    });
console.log(IMmessage);

    // 发送消息
    const res = await chat.sendMessage(IMmessage);

    if(res.code == 0){
        message.value = ''
      msgList.push(IMmessage)
    }

}



</script>
<style lang="less" scoped>
.wrap {
    width: 100%;
    height: 100%;

    .content {
        height: calc(100% - 250px);
        padding: 0px 10px;
        overflow-y: auto;

        .item {
            display: flex;
            height: 50px;
            align-items: center;

            &.right {
                flex-direction: row-reverse;
                .avart{
                    margin-right: 0px;
                    margin-left: 10px;
                }
            }

            .avart {
                margin-right: 10px;
            }
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background: #fff;
        z-index: 9999;
        padding: 10px;
        .msgInput{
            margin-bottom: 10px;
        }
        .sentBtn{
            display: block;
            width: 100px;
            margin: 0 auto;
        }
    }
}
</style>